import React from 'react';

import { useTranslation } from 'react-i18next';

import styles from './styles.module.less';
import {Tabs} from "antd";
import DCI from "./dci";
import DataCenter from "@src/views/Price/dataCenter";
import {CloudServerOutlined, DatabaseOutlined} from "@ant-design/icons";

const Price = () => {
    const { t } = useTranslation();

    return (
        <div style={{ height: '100vh', overflowY: 'hidden' }}>
            <Tabs
                cardHeight="100vh"
                defaultActiveKey="0"
                cardGutter="6"
                titleFontSize="20"
                tabPosition="left"
                className={styles.tabBg}
                items={new Array(10).fill(null).map((_, i) => {
                    const id = String(i);
                    if (id==="0"){
                        return {
                            label: (<span> <CloudServerOutlined /> {t('End to end connection')}</span>),
                            key: id,
                            children: (
                                <div style={{ overflowY: 'auto', height: '100vh' }}>
                                    <DCI/>
                                </div>
                            ),
                        };
                    } else if (id==="1"){
                        return {
                            label: (<span> <DatabaseOutlined /> {t('Data Center')}</span>),
                            key: id,
                            children: <DataCenter/>,
                        };
                    }
                    // else if (id==="2"){
                    //     return {
                    //         label: `AWS DX`,
                    //         key: id,
                    //         children: <DataInfo/>,
                    //     };
                    // } else if (id==="3"){
                    //     return {
                    //         label: `Azure ExpressRoute`,
                    //         key: id,
                    //         children: '',
                    //     };
                    // } else if (id==="4"){
                    //     return {
                    //         label: `阿里云高速通道`,
                    //         key: id,
                    //         children: '',
                    //     };
                    // } else if (id==="5"){
                    //     return {
                    //         label: `腾讯云专线接入`,
                    //         key: id,
                    //         children: '',
                    //     };
                    // } else if (id==="6"){
                    //     return {
                    //         label: `Google Cloud Interconnect`,
                    //         key: id,
                    //         children: '',
                    //     };
                    // } else if (id==="7"){
                    //     return {
                    //         label: `Nutanix Xi 云端链接`,
                    //         key: id,
                    //         children: '',
                    //     };
                    // } else if (id==="8"){
                    //     return {
                    //         label: `Oracle云端链接`,
                    //         key: id,
                    //         children: '',
                    //     };
                    // } else if (id==="9"){
                    //     return {
                    //         label: `Salesforce云端链接`,
                    //         key: id,
                    //         children: '',
                    //     };
                    // }



                })}
            />

        </div>
    );

};

export default Price;
